<script setup lang="ts">
</script>

<template>
  <div class="layout">
    <div class="layoutMain">
      <div class="theFirst">
        <div class="textAtLeft">
          <h1 class="firstH">iSlide</h1>
          <h1>让 PPT 设计简单起来</h1>
          <div class="funcion">
            <div>AI深度赋能<span class="longString"></span>含80+设计辅助功能</div>
            <div>超1400W专业PPT模板/素材</div>
          </div>
          <button class="downloadButton">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="#fff" style="width: 14px; height: 14px;">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 1.25H9.58333L9.58269 9.58333H1.25V1.25Z"></path>
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M10.4168 1.25H18.7499C18.7499 4.0277 18.7504 6.8054 18.7494 9.58309C15.9722 9.58261 13.1945 9.58309 10.4173 9.58309C10.4163 6.8054 10.4168 4.0277 10.4168 1.25Z">
              </path>
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M1.25 10.4166C4.02771 10.4176 6.80541 10.4163 9.58312 10.4176C9.5836 13.1953 9.58312 15.9725 9.58312 18.7502H1.25V10.4166Z">
              </path>
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M10.4172 10.4172C13.1945 10.4163 15.9722 10.4167 18.75 10.4167V18.7501H10.4167C10.4172 15.9723 10.4162 13.1945 10.4172 10.4172Z">
              </path>
            </svg>
            <span>&nbsp;免费下载 Windows 版&nbsp; </span>
            <svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" fill="#fff">
              <path
                d="M217.301333 414.933333a21.333333 21.333333 0 0 1-1.066666-30.165333l29.098666-31.232a21.333333 21.333333 0 0 1 30.165334-1.024l236.117333 220.16 236.16-220.16a21.333333 21.333333 0 0 1 30.122667 1.024l29.098666 31.232a21.333333 21.333333 0 0 1-1.024 30.165333L541.738667 661.333333l-13.44 14.421334a21.290667 21.290667 0 0 1-16.725334 6.741333 21.290667 21.290667 0 0 1-16.64-6.741333l-13.44-14.506667z">
              </path>
            </svg>
            <div class="displayBox">
              <div>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="">
                  <path
                    d="M16.9278 17.4988C16.0979 18.7387 15.2179 19.9486 13.878 19.9686C12.5381 19.9986 12.1081 19.1787 10.5883 19.1787C9.05836 19.1787 8.58839 19.9486 7.31848 19.9986C6.00857 20.0486 5.01864 18.6787 4.1787 17.4688C2.46882 14.999 1.15891 10.4493 2.91878 7.38949C3.78872 5.8696 5.34862 4.90966 7.0385 4.87966C8.31841 4.85967 9.53833 5.7496 10.3283 5.7496C11.1082 5.7496 12.5881 4.67968 14.138 4.83967C14.788 4.86966 16.6078 5.09965 17.7778 6.81953C17.6878 6.87953 15.6079 8.09944 15.6279 10.6293C15.6579 13.6491 18.2777 14.659 18.3077 14.669C18.2777 14.739 17.8877 16.1089 16.9278 17.4988ZM11.2182 1.4999C11.9482 0.669954 13.1581 0.0399973 14.158 0C14.288 1.16992 13.818 2.34984 13.1181 3.18978C12.4281 4.03972 11.2882 4.69968 10.1683 4.60968C10.0183 3.45976 10.5783 2.25984 11.2182 1.4999Z">
                  </path>
                </svg>
                免费下载 macOS 版
              </div>
              <div>
                <svg width="20" height="20" viewBox="0 0 16 16" fill="none">
                  <circle cx="2.5" cy="8" r="1.25" fill="#2F2F2F"></circle>
                  <circle cx="8" cy="8" r="1.25" fill="#2F2F2F"></circle>
                  <circle cx="13.5" cy="8" r="1.25" fill="#2F2F2F"></circle>
                </svg>
                更多下载
              </div>
            </div>
          </button>
        </div>
        <div class="designPPT">
          <img src="/images/backgroundImg/designPPT.png">
        </div>
      </div>
      <div class="theSecond">
        <div>
          <p>8年专注</p>
          <p>解决 PPT 制作痛点</p>
        </div>
        <span></span>
        <div>
          <p>200+ 个国家/地区</p>
          <p>支持离线使用，提供多语言版本</p>
        </div>
        <span></span>
        <div>
          <p>3500W 用户的选择</p>
          <p>深受用户信赖</p>
        </div>
      </div>
      <div>
        <video src="../videos/homeISlide.mp4" autoplay loop muted></video>
      </div>
    </div>
  </div>

</template>

<style scoped lang="less">
.layout {
  width: 100%;
  height: 100%;
  background-image: url(../images/backgroundImg/graduallyColor1.jpg);
  background-position: calc(50% - 10px) calc(50%);
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 1300px;
  overflow: hidden;
}

.layoutMain {
  max-width: 1300px;
  margin: 0 auto;

}

.theFirst {
  display: flex;
  position: relative;
  width: 100%;
}

.textAtLeft {
  width: 670px;
  margin-top: 200px;
  color: rgb(47, 47, 47);

  h1 {
    font-size: 46px;
  }

  .firstH {
    width: 380px;
  }

  .funcion {
    width: 290px;
    margin-top: 20px;
    font-size: 20px;
  }

  button {
    width: 250px;
    height: 50px;
    font-size: 17px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: rgb(47, 47, 47);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 50px;

    svg {
      padding-right: 5px;
      padding-left: 5px;
    }
  }
}

.designPPT {
  display: block;
  width: 1180px;
  position: relative;

  img {
    width: 1080px;
    vertical-align: middle;
    position: absolute;
    top: -40px;
    left: -80px;
  }
}

.downloadButton {
  background-color: #000;
  color: #fff;
  position: relative;

  &:hover .displayBox {
    display: block;
  }

  &:hover .icon {
    transform: rotate(-180deg);
  }

  .icon {
    transition: transform .3s linear;
  }

  .displayBox {
    position: absolute;
    top: 50px;
    width: 250px;
    height: 100px;
    border-radius: 6px;
    box-shadow: 0 8px 20px 0 rgba(6, 8, 40, .06);
    display: none;

    div {
      height: 42px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      color: #484848;
      margin: 4px;
      border-radius: 6px;

      &:hover {
        background-color: rgb(245, 246, 249);
      }

      svg {
        fill: currentColor;
        margin-left: -6px;
      }
    }
  }
}

.theSecond {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 200px;
  margin-bottom: 50px;

  div {
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    width: 280px;

    p:nth-child(1) {
      font-size: 20px;
      color: rgb(48, 37, 47);
      padding-bottom: 5px;
    }

    p:nth-child(2) {
      color: rgb(88, 98, 112);
    }
  }

  span {
    display: inline-block;
    height: 65px;
    margin-top: -7px;
    border-left: 2px solid rgb(234, 235, 240);
  }
}

.longString {
  display: inline-block;
  height: 12px;
  margin: 0 7px;
  border-left: 1px solid #000;
}

video {
  width: 1300px;
  margin-top: 40px;
  margin-bottom: 100px;
  border-radius: 10px;
}
</style>
